// react-router-dom
import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter,HashRouter,Route,Link,Redirect,Switch} from 'react-router-dom'
// import Home from './home'
import List from './list'
import Login from './login'
// component:()=>import(/*qqq*/ './home')
function load(loader){
  return class Temp extends React.Component{
    state = {
      Com:null
    }
    componentDidMount(){
      loader().then(key=>{
        this.setState({
          Com:key.default
        })
      })
    }
    render() {
      let {Com} = this.state;
      return <>
        {
          Com?
          <Com/>:
          <h2>loading</h2>
        }
      </>
    }
  }
}

const Home = load(()=>import(/*webpackChunkName:"qqq"*/ './home'))

let QQQ = ()=><h1>QQQ</h1>
let Page404 = ()=><h1>404页</h1>
// BrowserRouter相当于 vueROuter的 history模式
// HashRouter相当于 vueROuter的 hash模式
// Route 相当于 vueROuter的   router-view
// Link 相当于 vueROuter的  router-link



function  Protect(props){
  let isLogin = localStorage.getItem('isuserlogin') || true;
  let Com = props.component;
  return <>
    <Route path={props.path} render={(params)=>{
      // params  --> {history  localtion  match}
      if(isLogin){
        return <Com {...params}></Com>
      }else{
        return <Redirect to='/login'></Redirect>
      }
    }}></Route>
  </>
}

class App extends React.Component {

    render() {
        return <div className=''>
            <HashRouter>
              <div>
                <Link to='/home'>home</Link>;
                <Link to='/list'>list</Link>;
              </div>
              <Switch>
              {/* Switch 套起来之后，当上边有一个 path匹配上的时候 下边Route就不再查看了*/}
                {/* exact 精确匹配 只有当路径完全是/的时候 才会渲染 */}
                {/* <Route path='/' exact component={QQQ}></Route> */}
                {/* 通过Route渲染的组件 都会有history传递过去；history中的push 和replace 就是相当于Vue中的编程式导航  */}
                <Route path='/' exact render={()=><Redirect to='/home'></Redirect>}></Route>
                <Route path='/home' component={Home}></Route>
                {/* <Route path='/list' component={List}></Route> */}
                <Protect permissin='3' path='/list' component={List}></Protect> 
                <Route path='/list2/:id' component={List}></Route>
                <Route path='/login' component={Login}></Route>
                <Route path='*' component={Page404}></Route>
              </Switch>
            </HashRouter>
        </div>;
    }
}

ReactDOM.render(<App/>,document.getElementById('root'))